<template>
  <div class="tinymce-container editor-container">
    <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
    <!-- <div class="editor-custom-btn-container">
      <editorImage
        color="#1890ff"
        class="editor-upload-btn"
        @successCBK="imageSuccessCBK"
      ></editorImage>
    </div> -->
  </div>
</template>

<script>
import editorImage from "./components/editorImage";
import "../../../static/tinymce4.7.5/langs/zh_CN";

const plugins = [
  `advlist anchor autolink autosave code codesample colorpicker colorpicker
  contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime
  legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace
  spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount`,
];
const toolbar = [
  `bold italic underline strikethrough alignleft aligncenter
  alignright outdent indent  blockquote undo redo removeformat code`,
  `hr bullist numlist link image charmap	 preview anchor pagebreak
    fullscreen insertdatetime media table forecolor backcolor`,
];
var COS = require("cos-js-sdk-v5");

var myBucket = "mseb-1301879582";
var myRegion = "ap-beijing";
var mySecretId = "AKIDToxsY0DCwRlriKitpX0EDxSikY9WeYDi";
var mySecretKey = "MUO2TggRxFJ8k8HDxSkpgIgpjPs8AxVo";

// 初始化实例
var cos = new COS({
  SecretId: mySecretId,
  SecretKey: mySecretKey,
  FileParallelLimit: "3",
  ChunkParallelLimit: "3",
});
export default {
  name: "tinymce",
  components: { editorImage },
  props: {
    id: {
      type: String,
    },
    value: {
      type: String,
      default: "",
    },
    toolbar: {
      type: Array,
      required: false,
      default() {
        return [];
      },
    },
    menubar: {
      default: "file edit insert view format table",
    },
    height: {
      type: Number,
      required: false,
      default: 360,
    },
    width: {
      type: Number,
      required: false,
      default: 720,
    },
  },
  data() {
    return {
      hasChange: false,
      hasInit: false,
      tinymceId: this.id || "vue-tinymce-" + +new Date(),
    };
  },
  watch: {
    value(val) {
      if (!this.hasChange && this.hasInit) {
        this.$nextTick(() =>
          window.tinymce.get(this.tinymceId).setContent(val)
        );
      }
    },
  },
  mounted() {
    this.initTinymce();
  },
  activated() {
    this.initTinymce();
  },
  deactivated() {
    this.destroyTinymce();
  },
  methods: {
    initTinymce() {
      const _this = this;
      window.tinymce.init({
        selector: `#${this.tinymceId}`,
        width: this.width,
        height: this.height,
        language: "zh_CN",
        body_class: "panel-body ",
        object_resizing: false,
        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
        menubar: false,
        plugins: plugins,
        end_container_on_empty_block: true,
        powerpaste_word_import: "clean",
        code_dialog_height: 450,
        code_dialog_width: 1000,
        advlist_bullet_styles: "square",
        advlist_number_styles: "default",
        imagetools_cors_hosts: ["www.tinymce.com", "codepen.io"],
        default_link_target: "_blank",
        link_title: false,
        images_upload_handler:  (blobInfo, success, failure) => {
          let formData = new FormData();
          formData.append("img", blobInfo.blob());
          var folder = "images/";
          // 上传图片
          cos.putObject(
            {
              Bucket: myBucket /* 必须 */,
              Region: myRegion /* 存储桶所在地域，必须字段 */,
              Key: "images/" + blobInfo.filename(), //COS中的路径
              Body: blobInfo.blob(), // 上传文件对象
              onProgress: function (progressData) {
                // console.log(JSON.stringify(progressData.Location));
              },
            },
            (err, data) => {
              console.log(err || data);
              if (err) return;
              let file = []
              file.push("http://" + data.Location);
              success(file)
            }
          );
        },
        init_instance_callback: (editor) => {
          if (_this.value) {
            editor.setContent(_this.value);
          }
          _this.hasInit = true;
          editor.on("NodeChange Change KeyUp SetContent", () => {
            this.hasChange = true;
            this.$emit("input", editor.getContent());
          });
        },
      });
    },
    destroyTinymce() {
      if (window.tinymce.get(this.tinymceId)) {
        window.tinymce.get(this.tinymceId).destroy();
      }
    },
    setContent(value) {
      window.tinymce.get(this.tinymceId).setContent(value);
    },
    getContent() {
      window.tinymce.get(this.tinymceId).getContent();
    },
    imageSuccessCBK(arr) {
      const _this = this;
      arr.forEach((v) => {
        window.tinymce
          .get(_this.tinymceId)
          .insertContent(`<img class="wscnph" src="${v.url}" >`);
      });
    },
  },
  destroyed() {
    this.destroyTinymce();
  },
};
</script>

<style scoped>
.tinymce-container {
  position: relative;
}

.tinymce-container >>> .mce-fullscreen {
  z-index: 10000;
}

.tinymce-textarea {
  visibility: hidden;
  z-index: -1;
}

.editor-custom-btn-container {
  position: absolute;
  right: 10px;
  top: 2px;
  /*z-index: 2005;*/
}

.editor-upload-btn {
  display: inline-block;
}
</style>
